<template>
  <el-dialog
    :modelValue="modelValue"
    width="70%"
    align-center
    @close="handleClose(true)"
    draggable
    :show-close="false"
    destroy-on-close
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    class="main_notice_message"
    :append-to-body="true"
  >
    <template #header>
      <div class="flex justify-between h-full">
        <strong>
          <i class="text-[#fff] text-[20px]">{{
            list?.messageType?.label || "-"
          }}</i>
        </strong>
        <div class="h-full">
          <img
            :src="list?.messageType?.value == 2 ? system_update : system_edit"
            alt=""
            class="h-full object-fit: cover"
          />
        </div>
      </div>
    </template>
    <div v-loading="loading" style="max-height: 90vh">
      <div class="overflow-y-auto">
        <div class="font-bold text-[16px] mt-[12px]">
          {{ list?.title || "-" }}
        </div>
        <div class="text-[#999] my-[8px]">
          <span
            >已读 : <span class="text-[red]">{{ list?.viewed || 0 }} 人</span></span
          >
          <span class="mx-[30px]">发布人 : {{ list?.createUser || "-" }}</span>
          <span>发布时间 : {{ list?.sendTime || "-" }}</span>
        </div>
        <!-- <div class="flex w-full justify-between my-[16px]">
          <div
            class="whitespace-nowrap overflow-hidden text-ellipsis mr-[10px] font-bold text-[16px]"
            style="min-width: 60px; max-width: calc(100% - 350px)"
          >
            {{ list.title }}
          </div>
          <div class="w-[340px] text-right">
            <span>类型: {{ list?.messageType?.label || "-" }}</span>
            <span class="ml-[16px]">发布时间:{{ list.sendTime }}</span>
          </div>
        </div> -->
        <div
          @click="imageChangeEdit"
          v-html="list?.content || '-'"
          class="w-full py-[8px]"
        ></div>
        <div>
          <p v-for="item in list?.file || []" :key="item" class="my-[4px]">
            <svg-icon
              icon-class="file"
              class="inline-block text-[#3487FF] mr-[2px]"
            ></svg-icon>
            <span>{{ item.name }}</span>
            <span
              class="mx-[16px] text-[#3487FF] cursor-pointer"
              @click.stop="handleDown(item.url)"
              >下载</span
            >
          </p>
        </div>
        <!-- <div
          class="py-[16px]"
          v-if="list?.file?.length"
        >
          <strong>附件</strong>
          <p v-for="item in list?.file || []" :key="item" class="my-[6px]">
            <span>{{ item.name }}</span>
            <span
              class="mx-[16px] text-[#3487FF] cursor-pointer"
              @click.stop="handleDown(item.url)"
              >下载</span
            >
          </p>
        </div> -->
      </div>
    </div>
    <template #footer>
      <el-button @click="handleClose(true)">关闭</el-button>
    </template>
  </el-dialog>
  <ImagePreview
    :isPreview="isPreview"
    :previewSrc="previewSrc"
    @update:isPreview="(val) => (isPreview = val)"
  />
</template>
<script setup>
import system_edit from "@/assets/images/system_edit.png";
import system_update from "@/assets/images/system_update.png";
import { ElMessage } from "element-plus";
import {
  messageDetails,
  messageView,
  downFlieMsg,
} from "@/api/system/notice.js";
import ImagePreview from "@/components/imageViewer/index.vue";
// 声明接收参数
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  id: { type: [String, Number], default: null },
});
watch(
  () => props.id,
  async (val) => {
    if (val) {
      getDetail();
    }
  }
);
const list = ref({});
const getDetail = async () => {
  try {
    loading.value = true;
    const { data } = await messageDetails({ id: props.id });
    list.value = data || {};
    if (data?.isViewed.value == 1) return;
    viewsMsg([data.id]);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
const viewsMsg = async (ids) => {
  try {
    const { code, message } = await messageView({ ids });
  } catch (error) {}
};
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);

const handleDown = async (_url) => {
  const { data } = await downFlieMsg({
    alias: "notice-message-private",
    fileKey: _url,
  });
  if (data) window.open(data, "noopener", "noreferrer");
};
const previewSrc = ref([]);
const isPreview = ref(false);
const imageChangeEdit = (e) => {
  if (e.target.tagName == "IMG") {
    previewSrc.value = e.target.src;
    isPreview.value = true;
  }
};
const handleClose = async (refresh) => {
  list.value = {};
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style lang="scss" scoped>
:deep(h1) {
  font-size: 2em;
  font-weight: 700;
  margin: 0.67em 0;
}
:deep(h2) {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0.83em 0;
}
:deep(h3) {
  font-size: 1.17em;
  font-weight: 700;
  margin: 1em 0;
}
:deep(h4) {
  font-size: 1em;
  font-weight: 700;
  margin: 1.33em 0;
}
:deep(h5) {
  font-size: 0.83em;
  font-weight: 700;
  margin: 1.67em 0;
}
:deep(dl) {
  margin: 1em 0;
}
:deep(dd)  {
  margin-inline-start: 40px;
}
h1 {
  margin: 0.67em 0;
}
:deep(p) {
  margin: 1em 0;
}

</style>
